<template>
    <div class="article-lists">
        <el-card class="!border-none" shadow="never">
            <el-row>
                <el-col :span="6">
                  <span>数据补录日期：</span>
                  <el-date-picker
                    v-model="date"
                    type="date"
                    :disabled-date="disabledDate"
                    placeholder="选择日期"
                    value-format="YYYY-MM-DD"
                  />
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="save">保存补录</el-button>
                    <el-button type="primary" @click="submit">上报补录</el-button>
                </el-col>
            </el-row>
            
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <div class="bltitle">
              {{date}}{{defaultName}}
            </div>
            <div>
                <div>
                    <el-button v-for="(item,index) in comArr" :type="item.key==defaultKey?'primary':''" :key="item.key+index" class="mb-4" @click="defaultKey=item.key" v-perms="item.auth">{{item.name}}</el-button>
                </div>
                <div>
                    <el-button v-for="(item,index) in comArr1" :type="item.key==defaultKey?'primary':''" :key="item.key+index" class="mb-4" @click="defaultKey=item.key" v-perms="item.auth">{{item.name}}</el-button>
                </div>
            </div>
            <div style="overflow-x: auto;height: 54vh;">
              <keep-alive>
                <component :is="defaultComponent" :date="date" ref="children"></component>
              </keep-alive>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="reportSubmitSupplement">
import ylmglqk from '@/components/report/ylmglqk.vue';
import pmzbjjtzlqk from '@/components/report/pmzbjjtzlqk.vue';
import cpxsjhglyljcqk from '@/components/report/cpxsjhglyljcqk.vue';
import jlscjgykzqk from '@/components/report/jlscjgykzqk.vue';
import gxlscjgykzqk from '@/components/report/gxlscjgykzqk.vue';
import jhscjgykzqk from '@/components/report/jhscjgykzqk.vue';
import dlscqk from '@/components/report/dlscqk.vue';
import jcscqk from '@/components/report/jcscqk.vue';
import jbscqk from '@/components/report/jbscqk.vue';
import yqjzhtqk from '@/components/report/yqjzhtqk.vue';
import hbzb from '@/components/report/hbzb.vue';
import rscfx from '@/components/report/rscfx.vue';
import rgcfx from '@/components/report/rgcfx.vue';

import useUserStore from '@/stores/modules/user'

import { GetDateStr } from '@/utils/util'

const date = ref(GetDateStr(-1))

const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()  - 24 * 60 * 60 * 1000
}

const defaultKey = ref('ylmglqk')

const comArr = ref([{
  key:'ylmglqk',
  value:markRaw(ylmglqk),
  name:'原料煤管理情况',
  auth:['report.submit/ylmglqk']
},{
  key:'pmzbjjtzlqk',
  value:markRaw(pmzbjjtzlqk),
  name:'配煤指标及焦炭质量情况',
  auth:['report.submit/pmzbjjtzlqk']
},{
  key:'cpxsjhglyljcqk',
  value:markRaw(cpxsjhglyljcqk),
  name:'产品销售及化工类原料进厂情况',
  auth:['report.submit/cpxsjhglyljcqk']
},{
  key:'jlscjgykzqk',
  value:markRaw(jlscjgykzqk),
  name:'焦炉生产及工艺控制情况',
  auth:['report.submit/jlscjgykzqk']
},{
  key:'gxlscjgykzqk',
  value:markRaw(gxlscjgykzqk),
  name:'干熄炉生产及工艺控制情况',
  auth:['report.submit/gxlscjgykzqk']
},{
  key:'jhscjgykzqk',
  value:markRaw(jhscjgykzqk),
  name:'净化生产及工艺控制情况',
  auth:['report.submit/jhscjgykzqk']
}]);

const comArr1 = ref([{
  key:'dlscqk',
  value:markRaw(dlscqk),
  name:'动力生产情况',
  auth:['report.submit/dlscqk']
},{
  key:'jcscqk',
  value:markRaw(jcscqk),
  name:'甲醇生产情况',
  auth:['report.submit/jcscqk']
},{
  key:'jbscqk',
  value:markRaw(jbscqk),
  name:'精苯生产情况',
  auth:['report.submit/jbscqk']
},{
  key:'yqjzhtqk',
  value:markRaw(yqjzhtqk),
  name:'园区介质互通情况',
  auth:['report.submit/yqjzhtqk']
},{
  key:'hbzb',
  value:markRaw(hbzb),
  name:'水质指标分析',
  auth:['report.submit/hbzb']
},{
  key:'rscfx',
  value:markRaw(rscfx),
  name:'日生产分析',
  auth:['report.submit/rscfx']
},{
  key:'rgcfx',
  value:markRaw(rgcfx),
  name:'日工程分析',
  auth:['report.submit/rgcfx']
}]);

const defaultName = computed(() => {
  let is;
  comArr.value.forEach((item)=>{
    if(defaultKey.value==item.key){
      is = item.name
    }
  })
  comArr1.value.forEach((item)=>{
    if(defaultKey.value==item.key){
      is = item.name
    }
  })
  return is
})

const userStore = useUserStore()
const permissions = ref(userStore.perms)

pp:for (let p = 0; p < permissions.value.length; p++) {
  for (let i = 0; i < comArr.value.length; i++) {
    if(permissions.value[p]==comArr.value[i].auth[0]){
      console.log('-----')
      defaultKey.value = comArr.value[i].key
      break pp;
    }
  }
  for (let j = 0; j < comArr1.value.length; j++) {
    if(permissions.value[p]==comArr1.value[j].auth[0]){
      console.log('======'+comArr1.value[j].key)
      defaultKey.value = comArr1.value[j].key
      break pp;
    }
  }
}

const defaultComponent = computed(() => {
  let is;
  comArr.value.forEach((item)=>{
    if(defaultKey.value==item.key){
      is = item.value
    }
  })
  comArr1.value.forEach((item)=>{
    if(defaultKey.value==item.key){
      is = item.value
    }
  })
  return is
})

// 获取子组件实例对象
const children = ref(null)

function save(){
  children.value.save()
}

function submit(){
  ElMessageBox.confirm(
    '您确定要上报吗？上报后数据无法修改',
    '提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
  .then(() => {
    children.value.submit()
  })
}

</script>

<style>
  .bltitle{
    height: 44px;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
  }
</style>